<template>
  <g>
    <svg xmlns="http://www.w3.org/2000/svg" p-id="10406">
      <circle :cx="bgwidth" :cy="bgwidth" :r="bgwidth" :fill="setState(+props.state)" />
    </svg>
  </g>
</template>
<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    bgwidth: {
      type: Number,
      default: 10
    },
    bgheight: {
      type: Number,
      default: 10
    },
    state: {
      type: String,
      default: ''
    }
  });
  const setState = computed(() => (state: number) => {
    if (state === 1) {
      return '#66c03b';
    }
    if (state === 2) {
      return '#e4a13d';
    }
    if (state === 3) {
      return '#f36b6c';
    } else {
      return '#8f9299';
    }
  });
  //
  // onMounted(() => {
  //   setState();
  // });
</script>
